<!DOCTYPE html>
<!-- <html manifest="sharamag15.manifest"> -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    
    <title>Sharamag - Beta 1.5</title>
    <link rel="stylesheet" href="/static/css/ext-touch.css" type="text/css">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <script type="text/javascript" src="/static/js/ext-touch.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>

     <style>
        body {
            background-color: #376daa;
        }
        .card {
            text-align: center;
            color: #204167;
            text-shadow: #3F80CA 0 1px 0;
            font-size: 72px;
        }
        
        .x-phone .card {
            font-size: 36px;
        }

        .card p {
            font-size: 24px;
            line-height: 30px;
        }
        
        .x-phone .card p {
            font-size: 16px;
            line-height: 18px;
        }


    </style>

</head>
<body onorientationchange="setTimeout(function(){window.scrollTo(0,1)},100);updateOrientation();"
		onload ="setTimeout(function() {window.scrollTo(0,1)},100);">



<div id="backdrop1"><img src="photos/00.jpg" height:100%  ></div>  
        
<div id="c1" {z-index:5;}>
        <div id="issue-wrapper">
            <div class="article-link">
                    <h1>SharaMag 1.5</h1>
                    <div class="description">
                        <h2>ePublications for Everyone (beta)</h2>
                    </div>
            </div>    
        </div>
</div>
        
        
<div id="backdrop2"><img src="photos/01.jpg" height:100%  ></div>              
<div id="c2" {z-index:5;}>        
    <div id="c2-title"
        <div class="article-title">
            <h4>Introduction</h4>
        </div>
    </div>
    
    <div class="space-padding-75"></div>
    
    <div id="article-wrapper">
        <div class="issue-container">



<div class="right-side">
<p>This is a test concept of the creation of a digital magazine in a way that is as easy as writing a blog entry. In the footsteps of the Flickr video uploads, which force you too self-edit your videos to the most important 90 seconds, this concept for Sharamag (to share-a-mag) is limited in it&#8217;s size and frequency. What this amounts to is that a person can make one publication a month for free, consisting (in the free state) as ten articles, and each article can only have five images associated with it in the post.</p>
</div>
<div class="left-side">
<p>
Initially the content is formatted in a very simplistic way, with (for now) only two options for how text is handled. These limitations are subject to change over the course of development but for now, they serve the purpose for getting this whole thing online.</p>

</div>
            </div>
        
        </div>

    </div>


    <div id="c3">        
        <div id="c3-title"
        <div class="article-title">
            <h4>Text and Images</h4>
        </div>
        </div>

        <div id="article-wrapper">
        
        <div class="issue-container">
        
<div class="right-side">
<div class="image-button"><a href="#" onclick="document.body.style.backgroundImage='url(photos/03.jpg)'"><img class="thumb" title="inside8" src="photos/03.jpg" width="50px" height="auto"/></a></div>
<p>The uniting of text and images for online publishing has usually meant incorporating a design as the background for your web based journaling, or as images included in the posts themselves. In the epublishing world for mobile devices these concepts no longer apply. For one thing, the touch screen system enables you to scroll through text over another substrate. It also allows you to change the background image in it&#8217;s entirety. The concept is similar to a magazine with photographs, but not limited by the amount of space those photographs will take up in the magazine itself.</p>
</div>
<div class="space-padding-50"></div>
<div class="left-side">
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/04.jpg)'"><img class="thumb" src="photos/04.jpg" alt="" width="100%" height="auto" /></a></p>
<p>For this concept to work, the user must be able to change the magazine itself by choosing the images that are in the background, and you the creator have the chance to format that change by incorporating unique images in your article.</p></div>
<div class="left-side">
<p>The initial concept for this is to include a variety of images whose layout (portrait or landscape) will determine how one holds the device. Initially the images are incorporated as is from your desktop, but eventually they may be chosen from a variety of personal sources and edited to fit the content of the page.</p>
</div>
<div class="right-side">
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/05.jpg)'"><img class="thumb" src="photos/05.jpg" alt="" width="100%" height="auto" /></a></p>
<p>Due to constraints for screen sizes, and to keep the actual download of completed periodicals small enough to be unobtrusive, these are limited to 1024 x 768 pixels. Eventually they will be compiled to a size specific for the different devices you may end up reading them on (there is no reason to send your iphone the same dimensions as your ipad)</p>
<p>Change the image in the background by clicking on it, and change the orientation by rotating the device.</p>
</div>

<div class="right-side">
<center>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/02.jpg)'"><img class="thumb" src="photos/02.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/04.jpg)'"><img class="thumb" src="photos/04.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/03.jpg)'"><img class="thumb" src="photos/03.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/05.jpg)'"><img class="thumb" src="photos/05.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/06.jpg)'"><img class="thumb" src="photos/06.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/01.jpg)'"><img class="thumb" src="photos/01.jpg" alt="" width="100%" height="auto" /></a>
</center>
            
                </div>
            </div>
        </div>    
    </div>
    
    
     <div id="c4">
        <div id="c4-title"
        <div class="article-title">
            <h4>Editing and Reformatting</h4>
        </div>
        </div>
       
        <div id="article-wrapper">
            <div class="issue-container">
<div class="left-side">
<p>One of the ideas behind making this publication only available in a ten page format once a month is to reinforce the act of editing to people. How many times do you find a newspaper or magazine with grammatical errors or misspellings in it. Wouldn&#8217;t it be nice if they took more time to actually fix those mistakes? Well, this is one way to do it. While a periodical is sitting in the blog status, users can comment on it and offer suggestions. While the &#8216;grammar police&#8217; are usually not appreciated for their instructional wisdom, in this case their suggestions may make your publication better.</p>
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/05.jpg)'"><img class="thumb" src="photos/05.jpg" alt="" width="100%" height="auto" /></a>
</div>
<div class="right-side">
<p>One can, if they choose, decide to create a finalized publication without these edits, forcing it out the window, but sometimes that urge to change things only occurs after it has been sent. If you are trying to sell your publication (a goal I have in the long run) then you should want it to be as good as it could be. Sometimes that means rereading it a few times yourself and letting others have a look at it before it&#8217;s sent to the printer.</p>
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/01.jpg)'"><img class="thumb" src="photos/01.jpg" alt="" width="100%" height="auto" /></a></p>
</div>
        </div>
        </div>
    </div>

<div id="backdrop5"  <img src="photos/40.jpg" height:100%></div>      
    <div id="c5">
        <div id="c5-title"
        <div class="article-title">
            <h4>Your Best Five Photos</h4>
        </div>
        </div>    
        <div class="space-padding-100"></div>
        <div id="article-wrapper">
        
        <div class="issue-container">
<div class="right-side">
<p>The free version of this system limits you to five images in an article. This is, like the other limitations, a means to keep a publication from becoming too large, as well as (hopefully) forcing the creator to edit their images to a certain degree. If you are commenting on the edition before it is finalized, then suggestions for cropping and adjusting the image, or the outright removal of the image in the long run, may help to make a better issue for your publication.</p></div>
<div class="space-padding-100"></div>
<div class="space-padding-100"></div>
<div class="left-side" >
<p>The ultimate goal is to make this system available to everyone with an internet connection, and in the case of portfolios, having sections of themed topics may help with the ultimate goal of showcasing your work. There are advantages to using this form of sharing rather than a hardcopy portfolio or web site.</p></div>

        </div>
    </div>
    
        <div id="c6">
        </div>
            
            
        
    
</body>
            
</html>
